<template>
  <div class="buyer-payment-notice">
    <table
      border="1"
      cellspacing="0"
      cellpadding="5"
      style="border-collapse: collapse"
    >
      <thead>
        <tr>
          <th colspan="8" class="tc">退款申请</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="tc">退款类别</td>
          <td colspan="3">
            <el-checkbox-group v-model="form1.refundType">
              <el-checkbox disabled label="普通退款" :value="1"></el-checkbox>
              <el-checkbox disabled label="解约" :value="2"></el-checkbox>
              <el-checkbox disabled label="赔付" :value="3"></el-checkbox>
            </el-checkbox-group>
          </td>
          <td class="tc">合同编号</td>
          <td colspan="3">
            {{ form.contractNo }}
          </td>
        </tr>
        <tr>
          <td rowspan="3" class="tc" colspan="1">退款收款账户</td>
          <td colspan="7">
            <el-checkbox-group v-model="form1.refundPayerType">
              <el-checkbox
                disabled
                label="退 款(买方)"
                :value="2"
              ></el-checkbox>
              <el-checkbox
                disabled
                label="转付款(卖方)"
                :value="1"
              ></el-checkbox>
            </el-checkbox-group>
          </td>
        </tr>
        <tr>
          <td colspan="7">
            <el-checkbox-group v-model="form1.refundUserPriceType">
              <el-checkbox disabled label="原账户退款" :value="1"></el-checkbox>
              <el-checkbox disabled label="现金退款" :value="2"></el-checkbox>
              <el-checkbox disabled label="其他" :value="3"></el-checkbox>
            </el-checkbox-group>
          </td>
        </tr>
        <tr>
          <td class="tc" colspan="1">客户姓名</td>
          <td class="tc" colspan="1">{{ form.customerName }}</td>
          <td class="tc" colspan="1">客户电话</td>
          <td class="tc" colspan="1">{{ form.customerPhone }}</td>
          <td class="tc" colspan="1">收款账户</td>
          <td class="tc" colspan="2">{{ form.receiptAccount }}</td>
        </tr>
        <tr>
          <td class="tc" colspan="1">退款金额分类</td>
          <td colspan="7">
            <el-checkbox-group v-model="form1.refundPriceType">
              <el-checkbox disabled label="退全款" :value="1"></el-checkbox>
              <el-checkbox disabled label="部分退款" :value="2"></el-checkbox>
            </el-checkbox-group>
          </td>
        </tr>
        <tr>
          <td class="tc" colspan="1">退款项目</td>
          <td colspan="7">
            <el-checkbox-group v-model="form.refundCategories">
              <el-checkbox
                v-for="item in refundItemList"
                :key="item.id"
                :label="item.itemName"
                disabled
                :value="item.id"
              ></el-checkbox>
            </el-checkbox-group>
          </td>
        </tr>
        <tr>
          <td class="tc" colspan="1">退款方式</td>
          <td colspan="7">
            <el-checkbox-group v-model="form1.refundMethod">
              <el-checkbox disabled label="现金" :value="1"></el-checkbox>
              <el-checkbox disabled label="账户" :value="2"></el-checkbox>
              <el-checkbox disabled label="现金+账户" :value="3"></el-checkbox>
            </el-checkbox-group>
          </td>
        </tr>
        <!-- 退款账户 -->
        <tr>
          <td class="tc" colspan="1">退款账户</td>
          <td colspan="7">
            <el-checkbox-group v-model="form1.refundAccount">
              <el-checkbox disabled label="公司+门店" :value="1"></el-checkbox>
              <el-checkbox disabled label="门店" :value="2"></el-checkbox>
            </el-checkbox-group>
          </td>
        </tr>
        <tr>
          <td class="tc" colspan="1">应收金额</td>
          <td colspan="2">
            {{ form.receivableAmount ? `${form.receivableAmount}元` : `0元` }}
          </td>
          <td class="tc" colspan="1">应收金额大写</td>
          <td colspan="3">
            {{ form.receivableAmountInWords }}
          </td>
        </tr>
        <tr>
          <td class="tc" colspan="1">已收金额</td>
          <td colspan="2">
            {{ form.receivedAmount ? `${form.receivedAmount}元` : `0元` }}
          </td>
          <td class="tc" colspan="1">已收金额大写</td>
          <td colspan="3">
            {{ form.receivedAmountInWords }}
          </td>
        </tr>
        <tr>
          <td class="tc" colspan="1">退款金额</td>
          <td colspan="2">
            {{ form.refundAmount ? `${form.refundAmount}元` : `0元` }}
          </td>
          <td class="tc" colspan="1">退款金额大写</td>
          <td colspan="3">
            {{ form.refundAmountInWords }}
          </td>
        </tr>
        <tr>
          <td class="tc" colspan="1">退款日期</td>
          <td colspan="2">
            {{ form.refundDate }}
          </td>
          <td class="tc" colspan="1"></td>
          <td class="tc" colspan="1"></td>
          <td class="tc" colspan="1">电子签名</td>
          <td class="tc" colspan="1">
            {{ form.electronicSignature }}
          </td>
        </tr>
        <tr>
          <td class="tc" colspan="1">备注</td>
          <td colspan="7">
            {{ form.notes }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { reactive, defineProps } from "vue";
import { listRefundItem } from "@/api/business/refund";
const props = defineProps({
  msgData: {
    type: Object,
    required: true,
  },
});

const form = reactive({ ...props.msgData });
const form1 = reactive({});
form1.refundType = [form.refundType];
form1.refundPayerType = [form.refundPayerType];
form1.refundUserPriceType = [form.refundUserPriceType];
form1.refundPriceType = [form.refundPriceType];
form1.refundMethod = [form.refundMethod];
form1.refundAccount = [form.refundAccount];
const refundItemList = ref([]);
//获取退款项目列表
function getRefundItemList(type) {
  listRefundItem({ type }).then((res) => {
    refundItemList.value = res.data;
  });
}
getRefundItemList(form.refundPayerType);
</script>

<style scoped>
:deep(.el-checkbox__input.is-disabled .el-checkbox__inner) {
  border-color: #333;
  background-color: transparent;
}
:deep(.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner:after) {
  border-color: #333;
}
:deep(.el-checkbox__input.is-disabled + span.el-checkbox__label) {
  color: #333;
}
.tc {
  text-align: center;
}
table {
  width: 100%;
  margin: 0 auto;
  border-collapse: collapse;
}

td,
th {
  border: 1px solid #000;
  padding: 5px;
  width: 12.5%;
}
</style>
